import { useState } from 'react'
import styles from './LoginPage.module.css'
import { Button, Checkbox } from 'antd'
import RegistrationForm from '../../components/RegistrationForm'
import LoginForm from '../../components/LoginForm'
const LoginPage = () => {
  const [visible, setVisible] = useState([true, false])
  const [ackProtocol, setAckProtocol] = useState(false)

  const handleChangeToggleBtn = () => {
    setVisible(visible.map(item => !item))
  }

  return (
    <div className={styles.container}>
      <div className={styles.box}>
        <div className={styles.left}>
          <h1 className={styles.title}>workspace</h1>
          <p className={styles.desc}>整合你的Tab</p>
          {/* <Button type="primary" onClick={handleChangeToggleBtn}>
            {visible[0] ? "注册" : "登录"}
          </Button> */}
        </div>
        <div className={styles.right}>
          <p className={styles.right_welcome}>欢迎使用工作台</p>
          <LoginForm
            className={visible[0] ? '' : 'hidden'}
            handleChangeToggleBtn={handleChangeToggleBtn}
            ackProtocol={ackProtocol}
          ></LoginForm>
          <RegistrationForm
            className={visible[1] ? '' : 'hidden'}
            handleChangeToggleBtn={handleChangeToggleBtn}
            ackProtocol={ackProtocol}
          ></RegistrationForm>
          <div className={styles.protocol}>
            <Checkbox
              checked={ackProtocol}
              onChange={() => setAckProtocol(!ackProtocol)}
            />
            &nbsp;同意
            <span className={styles.highlight_text}>《用户协议》</span>和
            <span className={styles.highlight_text}>《隐私政策》</span>
          </div>
          {/* <div className={visible[0] ? styles.other_login : styles.hidden}>
            <h3 className={styles.other_login_title}>其他方式登录</h3>
            <div className={styles.icon_container}>
              <DingdingOutlined className={styles.icon_item} />
              <GithubOutlined className={styles.icon_item}/>
              <QqOutlined className={styles.icon_item}/>
              <WechatOutlined className={styles.icon_item}/>
            </div>
          </div> */}
        </div>
      </div>
    </div>
  )
}

export default LoginPage
